<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询页面</title>
    {include file='common/header'}
</head>
<body>
<h1>温度曲线项目</h1>
<hr>
<h1>查询数据页面</h1>
<div class="col-sm-12">
    <div class="ibox-content">
        <div class="col-sm-3 col-lg-offset-4 m-b-xs">
            <h1>选择数据</h1>
            <form action="{:url('index/tempindex/check')}" method="get">

                <div class="form-group">
                    <input id="date" name="date" value='选择日期' class="laydate-icon form-control" autocomplete="off" >
                </div>

                <select class="input-sm form-control input-s-sm inline" name = 'pid' id="pid">
                    <option value="0">选择纸种</option>
                    {foreach $data as $paper => $pid}
                    <option value="{$pid['pid']}">{$pid['paperName']}</option>
                    {/foreach}
                </select>

                <select class="input-sm form-control input-s-sm inline" name="wid" id="wid">
                    <option value="0">定量</option>
                    {foreach $weight as $weight}
                    <option value="{$weight['weight']}">{$weight['weight']}</option>
                    {/foreach}
                </select>
                <button id="btn" type="button" class="btn btn-primary " ><i class="fa fa-check"></i>&nbsp;提交</button>
                <a href="add.html">添加新的纸种信息</a>
                <a href="insert.html">去插入数据</a>
            </form>
        </div>
    </div>
    <style>
        #main{
            margin: 0 auto;
            margin-top: 250px;
        }
    </style>
    <div id="main" style="width: 800px;height:400px;border: 1px solid black"></div>
</div>

<script>
    laydate({
        elem:'#date',
        event:'focus',
        format:'YYYY-MM-DD',
        istime: true
    });
</script>
<script type="text/javascript">

    //点击按钮,ajax请求
    $('#btn').click(function () {
        $.get('{:url("index/tempindex/check")}', {
            date: $('#date').val(),
            pid: $("#pid").val(),
            wid: $("#wid").val()
        }, function (data) {
            // aa = eval(data)
            var aa = data;
            var b = JSON.parse(aa);
            // var len = aa.length;
            var newdata =[];
            // var newdata2 = [];
            // var newdata3 = [];
            //
            //
            for(var a =0;a<33;a++){
                newdata[a]=a+1;
            }
            //
            // for(var b =0;b<33;a++){
            //
            //     var num = 'b.dryer'+(b+1);
            //     console.log(num)
            // }



            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            option = {
                xAxis: {
                    type: 'category',
                    data: newdata,
                    // data: ['1', '2', '3', '4', '5', '6', '7','8','9', '10', '11', '12', '13', '14', '15','16','17', '18', '19', '20', '21', '22', '23','24','25', '26', '27', '28', '29', '30', '31','32']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    // data: newdata2,
                    data: [b.dryer1, b.dryer2, b.dryer3, b.dryer4, b.dryer5, b.dryer6, b.dryer7, b.dryer8,b.dryer9, b.dryer10, b.dryer11, b.dryer12, b.dryer13, b.dryer14, b.dryer15, b.dryer16,b.dryer17, b.dryer18, b.dryer19, b.dryer20, b.dryer21, b.dryer22, b.dryer23, b.dryer24,b.dryer25, b.dryer26, b.dryer27, b.dryer28, b.dryer29, b.dryer30, b.dryer31, b.dryer32],
                    type: 'line'
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })
    })

</script>
</body>
</html>